<!DOCTYPE html>
<html> 
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>yukari world</title>
    <#include "/lib/base_source.ftl">
      <style type="text/css">
      </style>
  </head> 
  <body>
    <div class='whole-container'>
      <#include "/lib/header.ftl">
        <div>
          <ul class="breadcrumb">
            <li>小马管理</li><span class="divider">/</span>
            <li>呼叫小马</li>
          </ul>
        </div>
        <div class="container-fluid">
          <div class="row-fluid">
            <div class="container span12">
              <#include "/lib/alert.ftl">
                 <div class='main-content'>
                    <div class="well form-inline">
                        <div class='main-action'>
                        	<textarea rows="3" id="msg" style="width:300px"></textarea>
                        	<div>
                    		<a class="btn btn-info btn-sm" href="javascript:sendMessage();">发送信息</a>
                    		<a class="btn btn-info btn-sm" href="javascript:callXiaoma();">呼叫小马</a>
                    		<a class="btn btn-info btn-sm" href="javascript:sendAndCall();">发送信息并呼叫小马</a>
                    		</div>
                        </div>
                    </div>
                    
                    <div class="table-content">
                    <#-- table -->
                        <table class="table-striped table-condensed table-hover" id="itemTable" style="width: 100%;max-width: 100%;margin-bottom: 20px;font-size:12px;word-break:break-all;word-wrap:break-word;">
                        </table>
                        <div class="pagination" id="itemPage"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
  <script>
    $(document).ready(function() {
    	getMessage('','down');
	});
	
	function getMessage(size,type){
		$.ajax({
			url : "${rc.contextPath}/admin/xiaoma/getMessage",
	    	dataType : "json",
	    	data :  {'size':size},
	    	type:'post',
	    	success:function(json){
	    		var data = json.data;
	    		for(i=0;i<data.length;i++){
	    			if ($("#message_"+data[i].id).length > 0){
	    				return;
	    			} else {
	    				addTr(data[i],type);
	    			}
	    		}
	    	}
		});
	}
	function addTr(data,type){
		var tb = $('#itemTable');
		var tr = $('<tr id="message_'+data.id+'" style="color:#c4c4c4"></tr>');
		var tr2 = $('<tr></tr>');
		if (data.name == "小缘"){
			var iconTd = $('<td valign="top" rowspan="2" style="width:48px;"><img src="https://apic.douyucdn.cn/upload/avanew/face/201612/27/20/2ba39478d616447b2ddeb4f56318b3e5_small.jpg"/></td>')
			var nameTd = $('<td style="text-align:left;width:40px">'+data.name+'</td>');
			var timeTd = $('<td style="text-align:left;width:200px">'+formatDate(data.createTime)+'</td>')
			var msgTd = ('<td colspan="6" style="color:#942892;font-size:20px;text-align:left;">'+data.message+'</td>');
			tr.append(iconTd);
			tr.append(nameTd);
			tr.append(timeTd);
			tr.append($('<td></td>'));
			tr.append($('<td></td>'));
			tr.append($('<td></td>'));
			tr.append($('<td></td>'));
			tr2.append(msgTd);
		} else{
			var iconTd = $('<td valign="top" rowspan="2" style="width:48px;"><img src="https://apic.douyucdn.cn/upload/avanew/face/201612/27/21/7bcdc0700e8a7a09f1bf888620cb0e73_small.jpg"/></td>')
			var nameTd = $('<td style="text-align:right;width:40px">'+data.name+'</td>');
			var timeTd = $('<td style="text-align:right;width:200px">'+formatDate(data.createTime)+'</td>')
			var msgTd = ('<td colspan="6" style="color:#0000c4;font-size:20px;text-align:right;">'+data.message+'</td>');
			tr.append($('<td></td>'));
			tr.append($('<td></td>'));
			tr.append($('<td></td>'));
			tr.append($('<td></td>'));
			tr.append(timeTd);
			tr.append(nameTd);
			tr.append(iconTd);
			tr2.append(msgTd);
		}
		if(type == 'top'){
			tb.prepend(tr2);
			tb.prepend(tr);
		} else {
			tb.append(tr);
			tb.append(tr2);
		}
	}
	
	function sendMessage(){
		var msg = $("#msg").val();
		$.ajax({
			url : "${rc.contextPath}/admin/xiaoma/sendMessage",
	    	dataType : "json",
	    	data :  {'msg':msg,'name':'小缘'},
	    	type:'post',
	    	success:function(json){
	    		getMessage(5,'top');
	    		$("#msg").val("");
	    	}
		});
	}
	function callXiaoma(){
		$.ajax({
			'url':'${rc.contextPath}/admin/xiaoma/callXiaoma',
			'data':'',
			'dataType':'json',
			'type': 'POST',
			'success':function(json){
	    		$.alert(json.data,json.message);
			}
		});
	}
	function sendAndCall(){
		sendMessage();
		callXiaoma();
	}
	
	function  formatDate(now)   {      
		var now= new Date(now);     
		var year=now.getFullYear();     
		var month=now.getMonth()+1;     
		var date=now.getDate();     
		var hour=now.getHours();      
		var minute=now.getMinutes();     
		var second=now.getSeconds();      
		return  year+"-"+buling(month)+"-"+buling(date)+" "+buling(hour)+":"+buling(minute)+":"+buling(second); 
	}
	
	function buling(a){
		if (a < 10){
			return "0"+a;
		} else {
			return a;
		}
	}
	
	setInterval("getMessage(5,'top')",5000);
	
		
   </script>
</body>
</html>